<template>
    <div class='left_item_container' @click="onClick">
        <div @click="add(item)">
            <img :src="item.icon" alt="">
            <p>{{item.name}}</p>
        </div>

    </div>
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                required: true
            },
            selectIndex: {
                type: Number
            },
            index: {
                type: Number
            }
        },
        methods: {
            onClick() {
                this.$emit("changeSelectIndex", this.index)
            },
            add(item){
                console.log(item)
                this.$router.push({
                    path:'/classshopping',
                    query:{
                        item:item
                    }
                })
            }
        }
    }
</script>

<style lang='scss' scoped>
    .left_item_container {
        width: 32%;
        height: 2.5rem;
        text-align: center;
        font-size: 0.35rem;

        img {
            width: 100%;
        }
    }
</style>